<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>检测项设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏-->
  <el-row style="margin: 10px;padding: 15px">
    <el-col :span="24">
      <el-form inline>
        <el-form-item label="检测项编码">
          <el-input/>
        </el-form-item>
        <el-form-item label="检测项名称">
          <el-input/>
        </el-form-item>
        <el-form-item>
          <el-form-item label="检测项类型">
            <el-select style="width: 250px">
              <el-option :value="0" label="尺寸"/>
              <el-option :value="1" label="外观"/>
              <el-option :value="2" label="重量"/>
              <el-option :value="3" label="性能"/>
              <el-option :value="4" label="成分"/>
            </el-select>
          </el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button @click="toAdd" type="primary" style="margin-right: 20px">新增</el-button>
        <el-button @click="toEdits" type="success" style="margin-right: 20px">修改</el-button>
        <el-button @click="toDeletes" type="danger" style="margin-right: 20px">删除</el-button>
        <el-button @click="toExport" type="info">导出</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="detects" border stripe ref="detectTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="detectEncode" label="检测项编码"/>
        <el-table-column prop="detectName" label="检测项名称"/>
        <el-table-column prop="detectType" label="检测项类型">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.detectType == 0">尺寸</el-tag>
            <el-tag type="success" v-else-if="scope.row.detectType == 1">外观</el-tag>
            <el-tag type="success" v-else-if="scope.row.detectType == 2">重量</el-tag>
            <el-tag type="success" v-else-if="scope.row.detectType == 3">性能</el-tag>
            <el-tag type="success" v-else-if="scope.row.detectType == 4">成分</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="detectTool" label="检测工具"/>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link @click="toEdit(scope.row.detectId)" style="margin: 0px 5px"
                     type="primary">
              <el-icon>
                <EditPen/>
              </el-icon>
              修改
            </el-link>
            <el-link @click="toDelete(scope.row)" style="margin: 0px 5px"
                     type="primary">
              <el-icon>
                <Delete/>
              </el-icon>
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 新增弹窗组件 -->
  <detectAdd @addComplete="addTaskComplete" @cancelTaskAdd="cancelTaskAdd" :detect="detect" :is-show="addWinIsShow"/>
  <!-- 行级编辑组件 -->
  <detectEdit :is-show="editWinIsShow" :detectId="editDetectId"/>
</template>
<script setup>
// 封装查询的列表数据
import {onBeforeMount, onMounted, ref} from "vue";
import detectAdd from "@/views/quality control/common defects/detect/detect-add.vue"
import detectEdit from "@/views/quality control/common defects/detect/detect-edit.vue"
import qualityRequest from "@/api/quality.js"
import {ElMessage, ElMessageBox} from "element-plus";

let detects = ref([]);
// 申明对象保存当前新增的对象
let detect = ref({});
let addWinIsShow = ref(false);
let editWinIsShow = ref(false);
let detectTable = ref(null)
let editDetectId=ref(null)
/**
 * 工具栏新增按钮事件
 */
function toAdd() {
  addWinIsShow.value = true;
}

/**
 * 行编辑事件
 */
function toEdit(id) {
  editDetectId=id;
  console.log("editDetectId得值为"+editDetectId)
  editWinIsShow.value = true;
}

/**
 * 行删除事件
 */
function toDelete(detectId) {
  console.log("defectId.defectId" + detectId.detectId)
  ElMessageBox.confirm(
      "你确定要删除删除吗?",
      "warning", {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {

    qualityRequest.deleteDetect(detectId.detectId, res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "成功删除"
        })
        loadDetects();
      } else {
        ElMessage({
          type: "warning",
          message: "删除失败"
        })
      }
    });
  }).catch(() => {
  });

}

/**
 * 批量删除
 */
function toDeletes(){
  let selectedRows = detectTable.value.getSelectionRows();
  if (selectedRows==0){
    ElMessage({
      type: "warning",
      message: "你没有选择任何数据"
    })
  }
  else {
    let deleteDetects = [];
    selectedRows.forEach(row => {
      deleteDetects.push(row.detectId)
    })
    // console.log("deleteDefects的值为"+deleteDefects)
    qualityRequest.deleteDetects(deleteDetects,res=>{
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "成功删除"
        })
        loadDetects();
      } else {
        ElMessage({
          type: "warning",
          message: "删除失败"
        })
      }
    })
  }
}
/**
 * 加载检测项列表
 */
function loadDetects() {
  // 通过API加载缺陷列表
  qualityRequest.loadDetectlist(res => {
    detects.value = res.data;
    console.log("detects的value" + detects.value)
  })
}

onMounted(() => {
      loadDetects();
    }
)

</script>